<template>
    <div class="p-6 space-y-6">
        <!-- 页面标题 -->
        <div class="flex items-center justify-between">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">插件市场</h2>
            <div class="flex items-center gap-4">
                <div class="relative">
                    <input type="text" placeholder="搜索插件..."
                           class="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           v-model="searchQuery">
                    <svg class="absolute left-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor"
                         viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </div>
                <select class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        v-model="selectedCategory">
                    <option value="">全部分类</option>
                    <option value="ui">UI组件</option>
                    <option value="chart">图表插件</option>
                    <option value="form">表单插件</option>
                    <option value="auth">认证插件</option>
                    <option value="file">文件管理</option>
                </select>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">总插件数</p>
                        <p class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ plugins.length }}</p>
                    </div>
                    <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                        </svg>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">已安装</p>
                        <p class="text-2xl font-bold text-green-600 dark:text-green-400">{{ installedCount }}</p>
                    </div>
                    <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">热门插件</p>
                        <p class="text-2xl font-bold text-orange-600 dark:text-orange-400">{{ popularCount }}</p>
                    </div>
                    <div class="w-10 h-10 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                        </svg>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">最新更新</p>
                        <p class="text-2xl font-bold text-purple-600 dark:text-purple-400">{{ updatedCount }}</p>
                    </div>
                    <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- 插件列表 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div v-for="plugin in filteredPlugins" :key="plugin.id"
                 class="card hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="flex items-start justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div
                             class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-800 dark:text-gray-200">{{ plugin.name }}</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ plugin.author }}</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-1">
                        <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ plugin.rating }}</span>
                    </div>
                </div>

                <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">{{ plugin.description }}</p>

                <div class="flex items-center justify-between mb-4">
                    <span
                          class="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs rounded-full">
                        {{ plugin.category }}
                    </span>
                    <span class="text-sm text-gray-500 dark:text-gray-400">{{ plugin.downloads }}次下载</span>
                </div>

                <div class="flex items-center justify-between">
                    <span class="text-lg font-bold text-gray-800 dark:text-gray-200">
                        {{ plugin.price === 0 ? '免费' : `¥${plugin.price}` }}
                    </span>
                    <div class="flex gap-2">
                        <button @click="viewDetail(plugin.id)"
                                class="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                            详情
                        </button>
                        <button @click="installPlugin(plugin.id)" :class="[
                            'px-3 py-1 text-sm rounded transition-colors',
                            plugin.installed
                                ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200'
                                : 'bg-blue-600 text-white hover:bg-blue-700'
                        ]">
                            {{ plugin.installed ? '已安装' : '安装' }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div class="flex justify-center">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                           :page-sizes="[12, 24, 48, 96]" :total="totalPlugins"
                           layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                           @current-change="handleCurrentChange" background class="custom-pagination" />
        </div>
    </div>
</template>

<script setup lang="ts" name="plugin-market">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

defineOptions({ name: 'plugin-market' })

const router = useRouter()
const searchQuery = ref('')
const selectedCategory = ref('')
const currentPage = ref(1)
const pageSize = ref(12)
const totalPlugins = ref(156)

// 模拟插件数据
const plugins = ref([
    {
        id: 1,
        name: '高级表格组件',
        author: 'VeloAdmin Team',
        description: '功能强大的表格组件，支持排序、筛选、分页、导出等功能',
        category: 'ui',
        rating: 4.8,
        downloads: 1234,
        price: 0,
        installed: false
    },
    {
        id: 2,
        name: 'ECharts 图表插件',
        author: 'Apache ECharts',
        description: '基于 ECharts 的图表组件，支持多种图表类型和交互功能',
        category: 'chart',
        rating: 4.9,
        downloads: 2345,
        price: 99,
        installed: true
    },
    {
        id: 3,
        name: '文件上传组件',
        author: 'FileUpload Team',
        description: '支持拖拽上传、多文件上传、进度显示的文件上传组件',
        category: 'file',
        rating: 4.7,
        downloads: 987,
        price: 0,
        installed: false
    },
    {
        id: 4,
        name: 'OAuth 认证插件',
        author: 'Auth Team',
        description: '支持多种 OAuth 认证方式，包括微信、QQ、GitHub 等',
        category: 'auth',
        rating: 4.6,
        downloads: 567,
        price: 199,
        installed: false
    },
    {
        id: 5,
        name: '动态表单生成器',
        author: 'Form Builder',
        description: '可视化表单设计器，支持拖拽式表单构建和动态验证',
        category: 'form',
        rating: 4.5,
        downloads: 789,
        price: 149,
        installed: false
    },
    {
        id: 6,
        name: '数据导出工具',
        author: 'Export Tools',
        description: '支持 Excel、PDF、CSV 等多种格式的数据导出功能',
        category: 'ui',
        rating: 4.4,
        downloads: 456,
        price: 79,
        installed: false
    }
])

// 计算属性
const filteredPlugins = computed(() => {
    let result = plugins.value

    if (searchQuery.value) {
        result = result.filter(plugin =>
            plugin.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
            plugin.description.toLowerCase().includes(searchQuery.value.toLowerCase())
        )
    }

    if (selectedCategory.value) {
        result = result.filter(plugin => plugin.category === selectedCategory.value)
    }

    return result
})

const installedCount = computed(() => plugins.value.filter(p => p.installed).length)
const popularCount = computed(() => plugins.value.filter(p => p.rating >= 4.5).length)
const updatedCount = computed(() => plugins.value.filter(p => p.downloads > 1000).length)

// 方法
function viewDetail(id: number) {
    router.push(`/plugin/detail/${id}`)
}

function installPlugin(id: number) {
    const plugin = plugins.value.find(p => p.id === id)
    if (plugin) {
        plugin.installed = !plugin.installed
        // 这里可以调用 API 进行安装/卸载操作
    }
}

function handleSizeChange(size: number) {
    pageSize.value = size
    currentPage.value = 1
}

function handleCurrentChange(page: number) {
    currentPage.value = page
}
</script>

<style scoped>
.custom-pagination {
    --el-pagination-bg-color: transparent;
    --el-pagination-text-color: rgb(107 114 128);
    --el-pagination-border-radius: 8px;
    --el-pagination-button-color: rgb(107 114 128);
    --el-pagination-button-bg-color: transparent;
    --el-pagination-button-disabled-color: rgb(156 163 175);
    --el-pagination-button-disabled-bg-color: transparent;
    --el-pagination-hover-color: rgb(59 130 246);
    --el-pagination-hover-bg-color: rgb(239 246 255);
}

.dark .custom-pagination {
    --el-pagination-text-color: rgb(156 163 175);
    --el-pagination-button-color: rgb(156 163 175);
    --el-pagination-hover-color: rgb(96 165 250);
    --el-pagination-hover-bg-color: rgb(30 58 138);
}
</style>